<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器示例</title>
    <link rel="stylesheet" href="../plugins/bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <script src="../plugins/jquery/jquery-3.5.1.min.js"></script>
    <!-- 注意事项：如果使用的bootstrap是5.0以下，则jquery.js的文件一定要放在bootstrap.min.js的前面 -->
    <script src="../plugins/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row my_div_style" style="height: 150px;width:100%;background-color: goldenrod;">
        <div class="col-4 my_div_style">
            2022年
        </div>
        <div class="col-4 my_div_style">
            收入6958元
        </div>
        <div class="col-4 my_div_style">
            支出 19852元
        </div>
    </div>
    <div class="row" style="margin-top: 25px">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span class="float-left">宵夜</span>
                    <span class="float-right">-56元</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 25px">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span class="float-left">宵夜</span>
                    <span class="float-right">-56元</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 25px">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span class="float-left">宵夜</span>
                    <span class="float-right">-56元</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 25px">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span class="float-left"><img src="../image/shouru.png" style="height: 50px">宵夜</span>
                    <span class="float-right">-56元</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 25px">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span class="float-left"><img src="../image/zhichu2.png" style="height: 50px">宵夜</span>
                    <span class="float-right">-56元</span>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<style>
    .my_div_style {
        font-size: xx-large;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
    }
</style>
</html>